<template>
    <li
        :class="['side-item', data.text == routerName ? 'current' : '']"
        @click="changeRouter"
    >
        <p><li :class="data.icon"></li>{{data.text}}</p>
    </li>
</template>

<script>
    import { onMounted } from 'vue';

    export default {
        name: "SideItem",
        props: {
            data: Object,
            routerName: String
        },
        setup(props, context) {

            const changeRouter = () => {
                context.emit('changeRouter', props.data.text)
            }

            return {
                changeRouter
            }
        }

    }
</script>

<style lang="scss" scoped>
.side-item{
    /*color: rgb(64, 158, 255);*/
    background-color: rgb(48, 65, 86);
    height: 56px;
    font-size: 14px;
    line-height: 56px;
    color: rgb(191, 203, 217);
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;

    &.current {
        color: rgb(64, 158, 255);
    }

    p{

        .iconfont{
            float: left;
            margin-right: 20px;
        }
    }
}
</style>